import BaseComponent from "../../app/baseComponent";

export class AUIDropdown extends BaseComponent {
    constructor(name) {
        super(name);
        this.methods = {
            toggleActive() {
                var self = this;
                self.private_active = !self.private_active;
                if (self.private_active) {
                    setTimeout(function () {
                        document
                            .addEventListener('click', self.clearMenus)
                    }, 0);
                } else {
                    document
                        .removeEventListener('click', self.clearMenus);
                }
            },
            clearMenus(e) {
                var self = this;
                if (e && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && self.$el.contains(e.target)) return;
                if (self && self.private_active) {
                    self.private_active = false;
                    document
                        .removeEventListener('click', self.clearMenus);
                }
            }
        }
    }
    _template() {
        var self = this;
        return `<div class="${self._name}" :aui-active="private_active"
><button type="button" class="aui-button" @click="toggleActive"><slot></slot></button><ul 
    ref="menu" class="aui-dropdown-menu">
<slot name="menu"></slot></ul></div>`
    }
    _data() {
        var ret = {};
        ret.levels = [
            {
            }
        ];
        ret.private_active = false;
        return ret;
    }
    _mounted() {
        var self = this;
    }
}

AUIDropdown.install = function () {
    window.AUICustomComponents.define("aui-dropdown", AUIDropdown);
};